<template lang="pug">
  kalix-dialog.user-add(title='添加' bizKey="videos" ref="kalixBizDialog" v-bind:formModel.sync="formModel" v-bind:targetURL="targetURL")
    div.el-form(slot="dialogFormSlot")
      input(v-model="formModel.vid" type="hidden")
      el-form-item(label="上级章节" prop="videosName" label-width="120px")
        el-input(v-model="formModel.videosName" disabled)
      el-form-item(label="视频名称" prop="title" v-bind:rules="rules.title" v-bind:label-width="labelWidth")
        el-input(v-model="formModel.title")
      el-form-item(label="院系" prop="did" v-bind:rules="rules.did" v-bind:label-width="labelWidth")
        el-cascader.long(placeholder="请选择院系信息" :options="options" filterable @change="getDep" :clearable="true" v-bind:show-all-levels="false" change-on-select)
      el-form-item(label="课程" prop="cid" v-bind:rules="rules.cid" v-bind:label-width="labelWidth")
        el-select(v-model="cname" placeholder="请选择课程" @change="getcid" :disabled="disable")
          el-option(v-for="item in items" :key="item.value" :label="item.label" :value="item.value" )
      el-form-item(label="上传视频" prop="videoUrl"  v-bind:rules="rules.videoUrl" v-bind:label-width="labelWidth" )
        kalix-clansman-upload(:action="action" v-on:filePath="getFilePath" fileType="video" tipText="只能上传视频文件")
        el-input(v-text="formModel.videoUrl")
      el-form-item(label="学习人数" prop="hits"  v-bind:label-width="labelWidth"  v-bind:rules="rules.hits")
        el-input-number(v-model="formModel.hits" :min="0")
      el-form-item(label="排序" prop="sequence"  v-bind:label-width="labelWidth"  v-bind:rules="rules.sequence")
        el-input-number(v-model="formModel.sequence" :min="0")

</template>

<script type="text/ecmascript-6">
  import {TrainingVideosUrl, DepartmentsURL} from '../../config.toml'
  import {baseURL} from '../../../../../config/global.toml'
  import FormModel from './model'
  import KalixClansmanUpload from '../../../../../components/fileUpload/upload'
  import KalixSelect from '../../../../../components/corelib/components/common/baseSelect'
  export default {
    name: 'VideosAdd',
    components: {KalixClansmanUpload, DepartmentsURL, KalixSelect},
    data() {
      return {
        formModel: Object.assign({}, FormModel),
        videosName: '',
        labelWidth: '170px',
        rules: {
          // vid: [{required: true, message: '请选择章节', trigger: 'change'}],
          // did: [{required: true, message: '请选择院系', trigger: 'change'}],
          // cid: [{required: true, message: '请选择课程', trigger: 'change'}],
          // title: [{required: true, message: '请输入名称', trigger: 'change'}],
          // videoUrl: [{required: true, message: '请选择视频网址', trigger: 'change'}],
          // hits: [{validator: validatehits, trigger: 'change'}]
        },
        action: baseURL + '/camel/rest/upload',
        filePathArr: [],
        fileNameArr: [],
        options: [],
        targetURL: TrainingVideosUrl,
        items: [],
        cname: null,
        disable: true
      }
    },
    mounted() {
      this.getDepCascader() // 获取院系信息并以级联形式显示
    },
    methods: {
      init(dialogOption) {
        console.log('---------dialogOption------------', dialogOption)
        console.log('---------dialogOption------------', dialogOption.vid)
        console.log('---------dialogOption------------', dialogOption.videosName)
        this.formModel.vid = dialogOption.vid
        this.formModel.videosName = dialogOption.videosName
        delete this.formModel.cid
      },
      getFilePath(filePath, fileName) {
        console.log('--getFilePath---', filePath)
        console.log('--fileName---', fileName)
        this.formModel.videoUrl = filePath
        // this.formModel.title = fileName
      },
      getDep(val) { // 通过级联获取数据后转成字符串
        let ddid = val.toString().substring(val.toString().lastIndexOf(',') + 1, val.toString().length)
        console.log('ddid========================', ddid)
        this.axios.request({
          method: 'GET',
          url: TrainingVideosUrl + '/getDDidBySelect',
          params: {
            did: ddid
          }
        }).then(res => {
          console.log('getDDidBySelect==============', res.data.data)
          this.items = res.data.data
          this.disable = false
        })
      },
      getDepCascader() { // 获取院系信息并以级联形式显示
        console.log('getDepCascader========================')
        this.axios.request({
          method: 'GET',
          url: DepartmentsURL + '/getDepCascader'
        }).then(res => {
          console.log('getDepCascader==============', res.data.data)
          this.options = res.data.data
        })
      },
      getcid(val) { // 给cid赋值
        this.formModel.cid = val
        let c = this.items.find(_item => {
          if (_item.value === val) {
            return _item
          }
        })
        console.log('c---:', c)
        this.formModel.cname = c.label
        console.log('this.formModel.cname====', this.formModel.cname)
      }
    }
  }
</script>
<style scoped lang="stylus" type="text/stylus">
    .el-form
      width 60%
      margin auto
      .el-form-item
         width 100%
         display inline-block
      .tests
        display: inline-block;
        position: relative;
        width: 50%;
</style>
